<template>
	<view class="container" :style="[grayScaleStyle]">
		<!-- 顶部状态栏占位 -->
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="left-area">
					<text class="nav-title">另品网</text>
				</view>

			</view>
		</view>
		<view class="nullBox"></view>
		<!-- 用户信息区域 -->
		<view class="user-box">

			<image class="user-bgimg" src="http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/my.jpg" mode="aspectFill">
			</image>
			<view class="user-info">

				<view class="basic-info">
					<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" v-if="userToken">
						<image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
					</button>
					<view class="avatar-btn" v-if="!userToken" @click="notLogin">
						<image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
					</view>
					<view class="info-right" v-if="userToken">
						<view class="name-wrap">
							<input type="nickname" class="name-input" :value="userInfo.name" placeholder="请输入昵称"
								@blur="onNicknameInput" />
							<view class="fensi" v-if="Number(userInfo.level) === 1">
								<text>粉丝数量</text>
								<text>1000</text>
							</view>
							<!-- <view class="verify-btn" v-else>身份认证</view> -->
						</view>
						<view class="id-location">
							<text class="id">ID: {{userInfo.id}}</text>
							<text class="location">IP属地: {{userInfo.location}}</text>
						</view>
					</view>
					<view class="info-right" v-else>
						<view class="name-wrap">
							<!-- <text>请先登录</text> -->
							<button class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">

								<text class="label">请先登录</text>

							</button>
							<button></button>
						</view>

					</view>
				</view>

				<!-- 资产信息 -->
				<view class="assets-info" v-if="userToken">
					<view class="asset-item" @click="gotoLink('/moduleC/pages/assets/index?idx=0')">
						<text class="label">我的资产</text>
						<text class="sub-label">查看全部</text>
					</view>
					<view class="asset-item" @click="gotoLink('/moduleC/pages/assets/index?idx=1')">
						<text class="label">积分</text>
						<text class="value">{{userInfo.points}}</text>
					</view>
					<view class="asset-item" @click="gotoLink('/moduleC/pages/assets/index?idx=2')">
						<text class="label">卡券</text>
						<text class="value">{{userInfo.coupons}}</text>
					</view>


					<view class="asset-setting">
						<view class="asset-setting-box" @click="switchtab">
							<text class="iconfont icon-setting"></text>
						</view>

					</view>
				</view>
			</view>
		</view>

		<!-- 功能区域 -->
		<view class="section">
			<view class="section-title">功能</view>
			<view class="function-grid">
				<view class="grid-item" v-if="Number(userInfo.level) === 1" v-for="(item, index) in shangjia" :key="index"
					@click="shangjiaOrder(item.type)">
					<!-- <text :class="['iconfont', item.icon]"></text> -->
					<view class="img">
						<image :src="item.img" mode="widthFix"></image>
					</view>

					<text class="label">{{item.name}}</text>
				</view>
				<view class="grid-item" v-for="(item, index) in functions" :key="index" @click="handleOrder(item.type)">
					<!-- <text :class="['iconfont', item.icon]"></text> -->
					<view class="img">
						<image :src="item.img" mode="widthFix"></image>
					</view>
					<text class="label">{{item.name}}</text>
				</view>
			</view>
		</view>

		<!-- 订单区域 -->
		<view class="section">
			<view class="section-title">订单</view>
			<view class="order-grid">
				<view class="grid-item" v-for="(item, index) in orders" :key="index" @click="handleOrder(item.type)">
					<!-- Dynamically bind the class using :class -->
					<!-- <text :class="['iconfont', item.icon]"></text> -->
					<view class="img">
						<image :src="item.img" mode="widthFix"></image>
					</view>
					<text class="label">{{ item.name }}</text>
				</view>

			</view>
		</view>

		<!-- 退出登录按钮 -->


		<!-- 底部导航栏 -->

		<!-- <TabBar :tabBarShow="2"></TabBar> -->
		<view class="page-total">
			<view class="tab-list">
				<view class="list" v-for="(item,index) in TabBarList" 
				@click="onTabBar(item,index)"
				:key="index">
					<image :src="item.acImg" mode="widthFix" v-if="index == 2"></image>
					<image :src="item.img" mode="widthFix" v-else></image>
					
				</view>
			</view>
		</view>


		<!-- 自定义二维码弹窗 -->
		<view class="modal" v-if="showModal" @click.stop="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-body">
					<view class="qr-container">
						<image class="qr-code" :src="qrCodeUrl" mode="aspectFit"></image>
						<text class="qr-tip">扫描二维码进行支付</text>
					</view>
				</view>
				<view class="modal-close" @click="closeModal">×</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="scss">
	@import '../../components/TabBar/TabBar.scss';
	.container {
		min-height: 100vh;
		background-color: #f3f3f3;
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}

	// 状态栏占位
	.status-bar {
		width: 100%;
		background-image: linear-gradient(125deg, #4B7BF9, #86B5FF);
	}

	.nullBox {
		width: 100%;
		height: 174rpx;
	}

	// 自定义导航栏
	.custom-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: url('http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/background.jpg');

		.trasnicon {
			transform: rotate(180deg);
		}

		.nav-content {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 12px;
			background: transparent;

			.left-area {
				width: 100%;
				color: #000000;
				font-size: 32rpx;
				text-align: center;
			}

		}
	}

	.user-box {
		width: 100%;
		height: 400rpx;
		// opacity: 0.15;
		// background: #000000;
		border-radius: 10px 10px 0px 0px;
		position: relative;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		overflow: hidden;

		.user-bgimg {
			width: 100%;
			height: 100%;
		}
	}

	.user-info {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		// background-color: #666;

		.basic-info {
			display: flex;
			align-items: center;
			// width: 86%;
			margin: 0 auto;
			// width: calc(100vw - 80rpx);
			gap: 15px;
			// margin-bottom: 25px;
			padding: 40rpx;

			.avatar-btn {
				padding: 0;
				width: 172rpx;
				height: 172rpx;
				background: none;
				border: none;
				border-radius: 50%;
				overflow: hidden;

				&::after {
					border: none;
				}


				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 2px solid rgba(255, 255, 255, 0.8);
				}
			}

			.info-right {
				flex: 1;

				.name-wrap {
					display: flex;
					align-items: center;
					gap: 12px;
					margin-bottom: 10px;
					justify-content: space-between;

					.phone-btn {
						outline: none;
						background-color: transparent;
						border: none;
						color: #fff;
						margin: 0;
						padding: 0;
						text-decoration: underline;

						&::after {
							outline: none;
							border: none;
						}
					}

					.name-input {
						font-size: 48rpx;
						color: #ffffff;
						font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
						font-weight: 700;
						background: none;
						border: none;
						width: 300rpx;

						&::placeholder {
							color: rgba(255, 255, 255, 0.8);
						}
					}

					.fensi {
						display: flex;
						flex-direction: column;

						text {

							height: 26.16rpx;
							font-size: 20.93rpx;
							font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
							font-weight: 700;
							text-align: right;
							color: #ffffff;
						}
					}

					.verify-btn {
						padding: 3px 10px;
						border: 1px solid rgba(255, 255, 255, 0.8);
						border-radius: 15px;
						font-size: 12px;
						background: rgba(255, 255, 255, 0.30);
						border: 1px solid #ffffff;
						font-weight: 400;
						color: #ffffff;
						font-size: 24rpx;
					}
				}

				.id-location {
					font-size: 20rpx;
					opacity: 0.85;
					display: flex;
					// gap: 12px;
					flex-direction: column;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}

		.assets-info {
			display: flex;
			justify-content: space-between;
			padding: 0 10px;
			margin-top: 30rpx;

			.asset-setting {
				flex: 3;
				display: flex;
				align-items: center;
				flex-direction: row-reverse;

				.asset-setting-box {
					width: 84rpx;
					height: 60rpx;
					background: rgba(255, 255, 255, 0.30);
					border: 2rpx solid #ffffff;
					border-radius: 32rpx;
					display: flex;
					align-items: center;
					justify-items: center;
					text-align: center;

					text {
						margin: 11.5rpx 25rpx;
						color: #fff;
					}
				}

			}

			.asset-item {
				flex: 1;
				text-align: center;
				position: relative;
				display: flex;
				flex-direction: column;
				font-weight: 100;
				color: #ffffff;
				font-size: 24rpx;


				.value {
					font-weight: 400;
					margin-top: 20rpx;
				}

				.sub-label {
					font-weight: 400;
					margin-top: 20rpx;
				}
			}
		}
	}

	.section {
		margin: 0 20rpx;
		margin-top: 40rpx;
		// padding: 16px 12px;
		// background: #fff;
		// border-radius: 12px;
		// box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

		&+.section {
			margin-top: 12px;
		}

		.section-title {
			font-size: 34rpx;
			font-weight: 500;
			color: #000000;
			position: relative;
			z-index: 4;

			&::before {
				content: '';
				position: absolute;
				z-index: -1;
				left: 0;
				bottom: 0;
				// transform: translateY(-50%);
				width: 60px;
				height: 7px;
				background: linear-gradient(98deg, #3ac29b 7%, rgba(110, 229, 204, 0.00) 95%);
			}
		}

		.function-grid {
			margin-top: 40rpx;
			display: flex;
			flex-wrap: wrap;
			// margin: 0 -8px;
			background: #ffffff;
			border-radius: 6px;
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);

			.grid-item {
				flex: 0 0 20%;
				padding: 20rpx 0rpx;
				// margin-bottom: 15px;
				display: flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 60rpx;
					height: 60rpx;
				}

				.iconfont {
					color: #1afa29;
					width: 48.84rpx;
					height: 52.33rpx;
				}


				.label {
					font-size: 20rpx;
					font-weight: 500;
					color: #646464;
					margin-top: 10rpx;
				}
			}
		}

		.order-grid {
			display: flex;
			background: #ffffff;
			border-radius: 6px;
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
			margin-top: 40rpx;
			padding: 20rpx 0rpx;

			.iconfont {
				color: #000000;
				opacity: 0.36;
			}

			.grid-item {
				flex: 0 0 20%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 54rpx;
					height: 60rpx;
				}

				.icon {
					max-width: 58px;
					max-height: 58px;
					width: 116rpx;
					height: 116rpx;
					padding: 20rpx;
					background: #f5f7fa;
				}

				.label {
					font-size: 20rpx;
					font-weight: 500;
					color: #646464;
					margin-top: 10rpx;
				}
			}
		}
	}

	.logout-btn {
		width: 280rpx;
		height: 60rpx;
		margin: 0 auto;
		line-height: 60rpx;
		margin-top: 160rpx;
		opacity: 0.3;
		background: #646464;
		border-radius: 15px;
		font-size: 24rpx;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background: #fff;
		display: flex;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		padding-bottom: env(safe-area-inset-bottom);

		.tab-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon {
				width: 22px;
				height: 22px;
				margin-bottom: 3px;
			}

			&.active {
				color: #4B7BF9;

				.icon {
					filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(1731%) hue-rotate(210deg) brightness(99%) contrast(94%);
				}
			}
		}
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.modal-content {
		position: relative;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 40rpx;
		width: 80%;
		max-width: 600rpx;
	}

	.modal-body {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.modal-close {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #999;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.qr-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-code {
		width: 400rpx;
		height: 400rpx;
		margin-bottom: 20rpx;
	}

	.qr-tip {
		font-size: 28rpx;
		color: #666;
		margin-top: 20rpx;
	}

	.payment-code {
		padding: 20rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		margin: 20rpx;
	}

	.grid-item-sran {

		// 可以添加一些特殊的样式
		.label {
			font-size: 20rpx;
			font-weight: 500;
			color: #646464;
			margin-top: 10rpx;
		}
	}
</style>